<template class="">
	<view class="" style="">
		<slot></slot>
		<u-popup v-model="show" mode="bottom" @close="closePop">
			<view class="select-total">
				<view class="select-top ">
					<view class="select-top-title flex-center align-center">
						<text class="fontw f32 col000">选择地址</text>
						<text class="closeBtn iconfont iconbaseline-close-px f32" @click="closePop"></text>
					</view>
					<view class="select-top-con">
						<view @click="activeTitle(index)"
							:class="[current == index ? 'active' : '',`select-box${index}`]"
							v-for="(item,index) in selectValList" :key='index'>
							{{item}}
						</view>
						<view class="select-top-tab" :style="[tabStyle]">
						</view>
					</view>
				</view>

				<view class="select-body">
					<swiper :duration="300" class="swiper" :current='current' @change='swiperChange'>
						<swiper-item v-if="proviceList.length > 0">
							<scroll-view scroll-y="true" style="height: 100%;">
								<view class="swiper-item flex-between align-center" v-for="item in proviceList"
									:key='item.code' @click="selectArea(0,item.name)">
									<text
										:style="{color:item.name == selectValList[0] ? 'rgba(255, 67, 69, 1)' : ''}">{{item.name}}</text>
									<text class="iconfont icongengduo"></text>
								</view>
							</scroll-view>
						</swiper-item>

						<swiper-item v-if="cityList.length > 0">
							<scroll-view scroll-y="true" style="height: 100%;">
								<view class="swiper-item flex-between align-center" v-for="item in cityList"
									:key='item.code' @click="selectArea(1,item.name)">
									<text
										:style="{color:item.name == selectValList[1] ? 'rgba(255, 67, 69, 1)' : ''}">{{item.name}}</text>
									<text class="iconfont icongengduo"></text>
								</view>
							</scroll-view>
						</swiper-item>

						<swiper-item v-if="areaList.length > 0">
							<scroll-view scroll-y="true" style="height: 100%;">
								<view class="swiper-item flex-between align-center" v-for="item in areaList"
									:key='item.code' @click="selectArea(2,item.name)">
									<text
										:style="{color:item.name == selectValList[2] ? 'rgba(255, 67, 69, 1)' : ''}">{{item.name}}</text>
									<text class="iconfont icongengduo"></text>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import AllAddress from '../../public/address.js'
	export default {
		data() {
			return {
				show: false,
				current: 0,
				selectValList: [
					'请选择',
					// '苏州市',
					// '吴中区'
				],
				tabWidth: 0,
				tabLeft: 0,
				proviceList: [],
				cityList: [],
				areaList: []
			}
		},
		computed: {
			tabStyle() {
				return {
					width: this.tabWidth + 'px',
					left: this.tabLeft + 'px'
				}
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			this.dealProData()
		},
		watch: {
			value: {
				handler(val) {
					if (val) {
						this.activeTitle(0)
					}
					this.show = val
				},
				immediate: true
			},
			current: {
				handler(val) {
					val < 3 ? this.activeTitle(val) : ''
				},
			}
		},
		methods: {
			swiperChange(e) {
				let {
					source,
					current
				} = e.detail
				console.log(e)
				this.current = current
			},
			closePop() {
				this.$emit('input', false)
			},
			activeTitle(index) {
				this.$nextTick(function() {
					this.current = index
					this.getWidth(`select-box${index}`)
				})
			},
			getWidth(select) {
				let query = uni.createSelectorQuery().in(this).select(`.${select}`)
				query.boundingClientRect(result => {
					this.tabWidth = result.width
					this.tabLeft = result.left
				}).exec();
			},
			selectArea(index, name) {
				this.$set(this.selectValList, index, name)
				if (index == 0) {
					this.current = index + 1
					this.dealCityData(name)
					this.selectValList.splice(this.current,this.selectValList.length - 1,'请选择')
				} else if (index == 1) {
					this.current = index + 1
					this.dealAreaData(name)
					this.selectValList.splice(this.current,this.selectValList.length - 1,'请选择')
				} else if (index == 2) {
					this.selectOver()
				}
			},
			selectOver() {
				let val = this.selectValList + ' '
				this.closePop()
				this.$emit('selectOver', val)
			},
			dealProData() {
				AllAddress.forEach(item => {
					let {
						name,
						code
					} = item
					this.proviceList.push({
						name,
						code
					})
				})
			},
			dealCityData(name) {
				for (let i = 0; i < AllAddress.length; i++) {
					let item = AllAddress[i]
					if (item.name == name) {
						this.cityList = item.cityList
						return
					}
				}
			},
			dealAreaData(name) {
				for (let i = 0; i < this.cityList.length; i++) {
					let item = this.cityList[i]
					if (item.name == name) {
						this.areaList = item.areaList
						return
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-total {
		height: 1080rpx;
		position: relative;
		z-index: 200000;

		.select-top-title {
			position: relative;
			height: 100rpx;
			border-bottom: 2rpx solid rgba(232, 234, 238, 0.7);

			.closeBtn {
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
				z-index: 100;
			}
		}

		.select-top-con {
			height: 74rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 2rpx solid rgba(232, 234, 238, 0.7);
			position: relative;

			.select-top-tab {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 2rpx;
				width: 100rpx;
				background-color: rgba(255, 67, 69, 1);
				transition: all 0.3s;
			}

			>view {
				margin-right: 30rpx;
				font-size: 32rpx;
			}

			.active {
				color: rgba(255, 67, 69, 1);
			}
		}

		.swiper {
			height: calc(1080rpx - 174rpx);

			.swiper-item {
				padding: 20rpx 40rpx;
				border-bottom: 2rpx solid rgba(232, 234, 238, 0.3);
			}
		}
	}
</style>
